<template>
    <div class="itemMusicList">
        <div class="itemListTop">
            <div class="listLeft">
                <van-icon name="play-circle-o" class="play"/>
                <span>播放全部<span class="listLeft-span2">(共{{itemList.length}}首)</span></span>
            </div>
            <div class="listRight">
                <van-icon name="plus" />
                <span>收藏({{subscribedCount}})</span>
            </div>
        </div>
        <!-- 歌曲列表 -->
       <div class="itemList">
            <div class="item" v-for="(item,i) in itemList" :key="i">
                <div class="itemLeft" @click="plaMusic(i)">
                    <span class="leftSpan">{{i+1}}</span>
                    <!-- 歌曲作者名字 -->
                    <div>
                        <p>{{item.name}}</p>
                        <span v-for="(item1, index) in item.ar" :key ="index">{{item1.name}}</span>
                    </div>
                </div>
               <!-- 歌曲MV -->
                <div class="itemRight">
                    <div >
                        <!-- 判断 MV 是否等于 0 如果等于 0 则没有 MV视频  -->
                        <van-icon name="tv-o" class="itemRight-play" v-if="item.mv !=0"/>
                        <van-icon name="wap-nav"  class="itemRight-info"/>
                    </div>
                </div>
            </div>
       </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    setup(props){
        console.log(props)
    },
    props:['itemList','subscribedCount'],

    methods:{
        plaMusic:function(i){  // i 接收
            //把 itemList 传过去给 updatePlayList
            this.updatePlayList(this.itemList)
            this.updatePlayListIndex(i)
        },
        ...mapMutations(['updatePlayList','updatePlayListIndex'])
    }
}
</script>
<style lang="less" scoped>
.itemMusicList{
    width: 100%;
    height: 10rem;
    background-color: #fff;
    border-top-right-radius: .4rem;
    border-top-left-radius: .4rem;
    padding: 0 0.2rem;
    .itemListTop{
        width: 100%;
        height: 1rem;
        display: flex;
         //均等分靠边对齐
        justify-content: space-between;
        //垂直居中
        align-items: center;
        .listLeft{
            width: 3rem;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .play{
                font-size: .5rem;
            }
           span{
            font-weight: 700;
           }
           .listLeft-span2{
            font-weight: 200;
            font-size: 0.05rem;
            color: #ccc;
           }
        }
    }
    .listRight{
      display: flex;
      align-items: center;
      background-color: red;
      padding: 0.2rem;
      color: #fff;
      border-radius: .6rem;
    }
    .itemList{
        padding-bottom: 2rem;
        width: 100%;
        .item{
            width: 100%;
            height: 1.4rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .itemLeft{
                width: 85%;
                height: 100%;
                display: flex;
                align-items: center;
                .leftSpan{
                    display: inline-block;
                    width: 0.2rem;
                    text-align: center;
                }
                div{
                    margin-left: 0.3rem;
                    p{
                        width: 4.54rem;
                        height: .4rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 700;
                    }
                    span{
                        font-weight: 400;
                        font-size: .24rem;
                        color: #999;
                    }

                }
            }
            .itemRight{
                width: 20%;
                height: 100%;
                display: flex;
                align-items: center;
                position: relative;
                color: #999;
                font-size:.5rem;
                .itemRight-play{
                    position: absolute;
                    left: 0;
                }
                .itemRight-info{
                    position: absolute;
                    right: 0;
                }
            }
        }
    }
}
</style>